<template>
  <div>
    <el-container>
      <el-header><!--头部-->
        <!--      <el-menu-->
        <!--        :default-active="activeIndex2"-->
        <!--        class="el-menu-demo"-->
        <!--        mode="horizontal"-->
        <!--        @select="handleSelect"-->
        <!--        background-color="#545c64"-->
        <!--        text-color="#fff"-->
        <!--        active-text-color="#ffd04b">-->
        <!--        <el-menu-item index="1">处理中心</el-menu-item>-->
        <!--        <el-menu-item index="2">消息中心</el-menu-item>-->
        <!--        <el-menu-item index="3">处理中心</el-menu-item>-->
        <!--        <el-menu-item index="4">消息中心</el-menu-item>-->
        <!--      </el-menu>-->
        <div class="a2">
          <span><font size="5" color="white">fancy music</font></span>
        </div>

        <div class="a9">
          <el-button type="text" @click="dialogVisible = true">登录</el-button>

          <el-dialog
            title="登录"
            :visible.sync="dialogVisible"
            width="30%"
            center
            :before-close="handleClose1">
            <span>
              <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="form.userName"></el-input>
                </el-form-item>
                <el-form-item label="密码">
                  <el-input placeholder="请输入密码" v-model="form.userPassword" show-password></el-input>
                </el-form-item>
              </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="login" class="submit">登 录</el-button>
            </span>
          </el-dialog>

        </div>

        <div class="a8">
          <el-button type="text" @click="centerDialogVisible = true">注册</el-button>

          <el-dialog
            title="用户注册"
            :visible.sync="centerDialogVisible"
            width="30%"
            center>
          <span>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="用户名" prop="name">
                <el-input v-model="ruleForm.userName"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input type="password" v-model="ruleForm.userPassword" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="checkPass">
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="ruleForm.userEmail"></el-input>
              </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="sendMail()">获取验证码</el-button>
            </el-form-item>
            <el-form-item label="验证码" prop="code">
              <el-input v-model="ruleForm.code"></el-input>
            </el-form-item>
            </el-form>
          </span>
            <span slot="footer" class="dialog-footer">
        <el-button @click="resetForm('ruleForm')">重 置</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">注 册</el-button>
      </span>
          </el-dialog>

        </div>

        <div class="a1">
          <el-avatar :size="35" :src="session_urlimg"></el-avatar>
        </div>

        <div style="background-color: #8c939d;width: 100px;margin-left: 1300px">
          {{session_loginname}}
        </div>
        <!--        <div class="home_input">-->
        <!--          <el-input placeholder="请输入内容" v-model="search_text">-->
        <!--            <el-button slot="append" icon="el-icon-search" @click="aaa"></el-button>-->
        <!--          </el-input>-->
        <!--        </div>-->
      </el-header>
      <el-container>
        <el-aside width="200px"><!--左部-->
          <el-row class="tac">
            <el-col :span="24">
              <hr/>
              <el-menu
                :default-active="$route.path"
                default-active="2"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                router>
                <el-menu-item index="/indeximg">
                  <i class="el-icon-umbrella"></i>
                  <span slot="title">fancy主页</span>
                </el-menu-item>
                <el-menu-item index="/MusicList">
                  <i class="el-icon-search"></i>
                  <span slot="title">发现音乐</span>
                </el-menu-item>
                <el-menu-item index="/EchartRank">
                  <i class="el-icon-s-data"></i>
                  <span slot="title">音乐排行</span>
                </el-menu-item>
                <el-menu-item index="/Play">
                  <i class="el-icon-headset"></i>
                  <span slot="title">播放音乐</span>
                </el-menu-item>
                <el-menu-item index="/personalCenter">
                  <i class="el-icon-house"></i>
                  <span slot="title">我的空间</span>
                </el-menu-item>
                <el-menu-item index="6">
                  <i class="el-icon-video-play"></i>
                  <span slot="title">音乐视频</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>

        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main><!--主题-->
        </el-container>

      </el-container>

    </el-container>
    <!--  <div class="layui-row">-->
    <!--    <div class="layui-col-xs12 layui-col-sm12 layui-col-md12 layui-col-bg12">-->
    <!--      <audio style="width: 90%;" ref="audio" :src="musicUrl" controls autoplay loop></audio>-->
    <!--    </div>-->
    <!--  </div>-->
  </div>
</template>

<script>
  import axios from "axios";

  axios.defaults.withCredentials = true

  export default {
    methods: {
      aaa() {
        axios.post("http://127.0.0.1:8200/rank/getListenNumberByUserId?userId=1").then(res => {
        })
      },
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      login() {
        //sessionStorage.setItem("session_userId","1");
        axios.post("http://127.0.0.1:8200/fancy-music-login/user/login", this.form).then(res => {
          if (res.data != "没有该用户" && res.data != "密码错误") {
            // console.log(res.data.tooken)
            this.$cookie.set("token", res.data.token)
            alert("登录成功")
            // console.log(res.data)
            this.dialogVisible = false
            // this.urlimg=res.data.userAvater
            // this.loginname111=res.data.userName
            // this.userId=res.data.userId
            // this.$router.push({
            //   name:'/PersonalCenter',
            //   params:{
            //     id:res.data.userId
            //   }
            // });
            alert(res.data)
            sessionStorage.setItem("session_urlimg", res.data.userAvater);
            sessionStorage.setItem("session_loginname", res.data.userName);
            sessionStorage.setItem("session_userId", res.data.userId);


            this.$router.push("/MusicList")
            this.$router.go(0);
          }
        })
      },
      handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },

      registry(formName) {
        axios.post("http://127.0.0.1:8200/fancy-music-login/user/registry", this.ruleForm).then(res => {
          if (res.data == "注册成功") {
            alert("注册成功")
            this.centerDialogVisible = false
          }
          if (res.data == "验证码错误") {
            alert("验证码错误")
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      sendMail: function () {
        axios.post("http://127.0.0.1:8200/fancy-music-login/user/sendMail", {"email": this.ruleForm.userEmail}).then(res => {
          if (res.data == '发送成功') {
            alert("发送成功")
          }
        })
      }
    },

    mounted() {
      this.session_urlimg = sessionStorage.getItem("session_urlimg")
      this.session_loginname = sessionStorage.getItem("session_loginname")
      this.session_userId = sessionStorage.getItem("session_userId")
    },


    data() {


      var validateEmail = (rule, value, callback) => {
        const mailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
        // const mailReg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
        if (!value) {
          return callback(new Error('邮箱不能为空'));
        }
        if (!mailReg.test(value)) {
          return callback(new Error('请输入正确的邮箱格式'));
        }
        setTimeout(() => {
          // axios.post("/api/findByEmail?email="+this.ruleForm2.email).then(res=>{
          //   console.log(res.data.success)
          //   if (res.data=="0"){
          //     callback(new Error('邮箱已被注册！'));
          //   }else{
          //     callback();
          //   }
          // })
        }, 1000);
      };
      var validateloginName = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('登录名不能为空'));
        }
        setTimeout(() => {
          axios.post("", this.ruleForm).then(res => {
            if (!res.data.success) {
              callback(new Error('用户名重复'));
            } else {
              callback();
            }
          })
        }, 1000);
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm.checkPass !== '') {
            this.$refs.ruleForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm.userPassword) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      var validatecode = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入验证码'));
        }
      };

      return {
        session_urlimg: sessionStorage.getItem("urlimg"),
        session_loginname: sessionStorage.getItem("loginname"),
        session_userId: sessionStorage.getItem("userId"),

        // userId:'',
        // loginname111:'',
        // urlimg:'',

        activeIndex: '1',
        activeIndex2: '1',
        input: '',
        search_text: '',
        form: {
          userName: '',
          userPassword: ''
        },
        dialogVisible: false,
        centerDialogVisible: false,
        ruleForm: {
          userName: '',
          userPassword: '',
          checkPass: '',
          userEmail: '',
          code: ''
        },
        rules: {
          userEmail: [
            {validator: validateEmail, trigger: 'blur'}
          ],
          username: [
            {validator: validateloginName, trigger: 'blur'}
          ],
          userpassword: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
          code: [
            {validator: validatecode, trigger: 'blur'}
          ],
        }
      }
    },
  }
</script>

<style scoped>
  .el-header {
    background-color: #545c64;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #545c64;
    color: #666666;
    text-align: center;
    line-height: 200px;
    height: 1050px;
  }

  .el-main {
    color: #333;
    /*text-align: center;*/
    /*line-height: 160px;*/
    background-color: #D3DCE6;
  }

  .a1 {
    line-height: 80px;
    float: right;
    width: 40px;
    height: 50px;
  }


  .a2 {
    float: left;
    margin-left: 50px;
  }

  .layui-row {
    margin-bottom: 0px;
  }

  .a9 {
    width: 50px;
    float: left;
  }

  .a8 {
    width: 50px;
    float: left;
  }

</style>
